import React from 'react'
import axios from 'axios'
import { Card, Table, Modal } from 'antd';



class HeightTable extends React.Component {

    componentDidMount() {
        //设置数据源
        const dataSource = [{
            id: 1,
            name: '程香香',
            sex: '女',
            statu: 1,
            married: '未婚',
            hobby: 5,
            birthday: '05-09',
            address: '蚌埠市蚌埠学院',
            time: '2018-11-02'

        }]
        // 为表遍历加唯一的key值
        dataSource.map((item, index)=> {
            return item.key = index
        })

        this.setState({
            data: dataSource
        })
        // this.request()
    }

    //2.动态获取数据
    request = () => {

        let _this = this
        let loading;
        loading = document.getElementById('ajaxLoading');
        loading.style.display = 'block';

        const url = 'https://www.easy-mock.com/mock/5bdc5b99f3dd6975f8bc732b/immocapi'
        axios(url + '/table/list')
            .then((res) => {
                //动态添加key 
                res.data.result.list.map((item, index)=> {
                    return item.key = index;
                })
                if (res.data && res.data.isShowLoading !== false) {
                    loading = document.getElementById('ajaxLoading');
                    loading.style.display = 'none';
                }
                if (res.status == '200' && res.data.code == 0) {
                    this.setState({
                        data2: res.data.result.list,
                        selectRowKeys: [],
                        selectedRows: null,
                        // 分页
                        // pagination: utils.pagination(res, (current) => {
                        //     // _this.params.page = current;
                        //     // this.request()
                        // })
                    })
                }
            })
            .catch((err) => {
                Modal.info({
                    title: '提示',
                    content: err
                })
            });

    }

    render() {
        const columns = [{
            title: 'id',
            dataIndex: 'id',
            key: 'id'
        },
        {
            title: '用户名',
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
            render(sex) {
                return sex == 1 ? '男' : '女'
            }
        },
        {
            title: '状态',
            dataIndex: 'statu',
            key: 'statu',
            render(statu) {
                let config = {
                    '1': '咸鱼一条',
                    '2': '婳婳的书',
                    '3': '风华浪子',
                    '4': '明天就好',
                    '5': '创业者'
                }
                return config[statu];
            }
        },
        {
            title: '婚否',
            dataIndex: 'married',
            key: 'married'
        },
        {
            title: '爱好',
            dataIndex: 'hobby',
            key: 'hobby',
            render(hobby) {
                let config = {
                    '1': '钢琴',
                    '2': '瑜伽',
                    '3': '睡觉',
                    '4': '看小说',
                    '5': '摄影'
                }
                return config[hobby];
            }
        },
        {
            title: '生日',
            dataIndex: 'birthday',
            key: 'birthday'
        },
        {
            title: '联系地址',
            dataIndex: 'address',
            key: 'address'
        },
        {
            title: '早起时间',
            dataIndex: 'time',
            key: 'time'
        }
    ]
        return (
            <div>
                <Card title="头部固定" className="warp">
                    <Table
                        // 是否加边框
                        bordered
                        //是否需要分页器 Object
                        pagination={false}
                        columns={columns}
                        />
                </Card>
            </div>
        )
    }
}


export default HeightTable